<template>
  <section>
    <van-sticky>
      <PageHeader title="收款账号"/>
    </van-sticky>

    <van-cell-group title="支付宝">
      <van-field v-model="account.alipay_name" label="支付宝姓名" placeholder="如：张三" />
      <van-field v-model="account.alipay_account" label="支付宝账号" placeholder="如：aba@xxx.com" />
    </van-cell-group>

    <van-cell-group title="银行账号">
      <van-field v-model="account.bank_name" label="开户行名称" placeholder="如：中国工商银行" />
      <van-field v-model="account.bank_branch_name" label="开户支行" placeholder="如：中国工商银行广州东圃支行" />
      <van-field v-model="account.bank_account" label="开户账户名" placeholder="如：张三" />
      <van-field v-model.number="account.bank_card_no" label="银行账号" placeholder="如：6644444442289787" />
    </van-cell-group>

    <div class="pd10">
      <van-button type="primary" round block @click="save">保存</van-button>
    </div>
  </section>
</template>

<script>
  import Vue from 'vue';
  import {Toast, Sticky, CellGroup, Cell, Button, Switch, Field} from 'vant';
  import {
    userWithdrawAccountSaveUri,
    userWithdrawAccountMyUri,
    STATIC_BASE_URL
  } from "../../../common/api";
  import PageHeader from "../../componets/PageHeader";

  Vue.use(Toast).use(Sticky).use(CellGroup).use(Cell).use(Button).use(Switch).use(Field);

  export default {
    components: {
      PageHeader
    },
    data() {
      return {
        account: {
          alipay_name: '',
          alipay_account: '',
          bank_name: '',
          bank_branch_name: '',
          bank_account: '',
          bank_card_no: ''
        }
      }
    },
    methods: {
      getAccount() {
        const that = this;
        const url = userWithdrawAccountMyUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            if(data) {
              that.account = data;
            }
          }
        }, response => {
          // error callback
        })
      },
      save() {
        const that = this;
        that.$http.post(userWithdrawAccountSaveUri, this.account, {emulateJSON: true}).then(response => {
          let {msg, code, data} = response.body
          if (code != 0) {
            Toast.fail(msg)
          } else {
            Toast.success('保存成功');
          }
        }, response => {
          Toast.fail('发生错误')
        })
      }
    },
    mounted: function () {
      this.getAccount();
    }
  }
</script>

<style scoped>

</style>
